import { useRef, useState, useEffect } from "react";
import { useHistory, useParams } from "react-router-dom/cjs/react-router-dom.min";
import FetchHelper from "../../../../../../utils/helper/fetch-helper";
import { Button, Card, Form, Table, Input } from "antd";
import FormItem from "antd/es/form/FormItem";
import TextArea from "antd/es/input/TextArea";
import JzzyHandle from "../../../../../../utils/apis/JzzyHandle";
import _ from 'lodash';
import '../JzzyAdd/index.less'

export default function JzzyAdd() {
    const rootRef = useRef();
    const [params, setParams] = useState({
        pageSize: 10,
        pageNum: 1
    })
    const [form] = Form.useForm();
    const jzzyKeyPath= useParams()?.keyPath
    // const jzzydl=jzzyKeyPath[0];
    // const jzzyzl=jzzyKeyPath[1];
    const jzzyxl=jzzyKeyPath

    // console.log(jzzyKeyPath)
    // const currentDate = new Date().toISOString().split('T')[0];
    const [jzzyAddDynamicForms,setJzzyAddDynamicForms] = useState();
   
    useEffect(() => {
        JzzyHandle.jzzyAddDynamicApi().then(datas => {
             setJzzyAddDynamicForms(datas);
             form.setFieldsValue({
                // jzzydl:jzzydl,
                // jzzyzl:jzzyzl,
                jzzyxl:jzzyxl
             })
        })
    },[jzzyxl,form])
    
    const data=[];
    const onFinish=(value)=>{
        FetchHelper.postJson(`/admin-api/ybyj/jzzy`,value).then(alert('新增成功'))
    }
  
    const history = useHistory();
  const quxiaoHandle = () => {
    history.push(`/manager/jzzy`)
  }
    return <div className="layout-h h100" style={{
        overflow:"scroll"
    }}>
        <Card className="h100 fill">
            <Form method="post" onFinish={onFinish} form={form}>
                <header style={{
                    fontSize:20,
                    fontWeight:"bold"
                }}>设施</header>
                <hr/>
                <div className="InputForm" style={{
                    flex:"flex",
                    flexWrap:"wrap",
                }}>
                    {jzzyAddDynamicForms !== undefined && jzzyAddDynamicForms.map(formItem=>{
                        let node;
                        switch (formItem.type) {
                            case 'Textarea':
                                node = <TextArea></TextArea>;
                                break;
                            case 'input':
                            default:
                                node = <Input style={{
                                    width: '90%'
                                }} 
                            />
                        }

                        return <div style={{
                        flexBasis:"33%",
                        marginBottom:"10px"
                        }}><Form.Item
                            label={formItem.alias}
                            name={formItem.name}
                            rules={[{
                                required: true
                            }]}
                        >
                            {node}
                            </Form.Item>
                            </div>
                    })}
                    </div>
                    <Table columns={[{
                        title: '代码',
                        dataIndex: 'dm',
                        key: 'dm',
                    },
                    {
                        title: '指标名称',
                        dataIndex: 'zbmc',
                        key: 'zbmc',
                    },
                    {
                        title: '数量',
                        dataIndex: 'sl',
                        key: 'sl',
                    },
                    {
                        title: '计量单位',
                        dataIndex: 'jldw',
                        key: 'jldw',
                    }]} dataSource={data} />
                    <div className="layout-h">
                        <Button className="btn1" type="primary" htmlType="submit">新增</Button>
                        <Button onClick={quxiaoHandle} className="btn2">取消</Button>
                    </div>
            </Form>
        </Card>
    </div>
}